<template>
	<view class="qiun-columns">
		<view class="qiun-bg-white qiun-title-bar qiun-common-mt">
			<view class="font-normal text-blue">{{ title }}<text v-if="startTime">({{startTime.substr(11,16)}}——{{endTime.substr(11,16)}})</text></view>
		</view>
		<view class="qiun-charts padding-left-xs padding-right-xs">
			<view class="flex justify-end">
				<view class="flex align-center margin-right">
					<view class="deepsleep margin-right-xs"></view>
					<view class="font-small">深睡</view>
				</view>
				<view class="flex align-center">
					<view class="softsleep margin-right-xs"></view>
					<view class="font-small">浅睡</view>
				</view>
			</view>
			<view v-if="deepTime==0&&lightTime==0">
				<view class="container flex">
					<view class="bg-gradual-grey" style="width: 100%;"></view>
				</view>
			</view>
			<view v-else>
				<view class="container flex">
					<view :class="{bg:index==isactive,softtime:data.sleepType==242,deeptime:data.sleepType==241}" @tap="showTime(index,data.sleepStartTime,data.sleepLen)" :style="{width:getWidth(data.sleepLen)}" v-for="(data,index) in timePeriod"></view>
				</view>
			</view>
			<view class="font-small text-center">
				{{time}}
			</view>
			<view class="flex align-center justify-between text-center margin-top-sm">
				<view class="flex-sub right-border">
					<view class="font-normal">总时长</view>
					<view class="font-normal">
						<view class="cu-avatar sm round margin-right-xs bgpoint" style="background-color:#e39311"></view>{{getTime(deepTime+lightTime)}}
					</view>
				</view>
				<view class="flex-sub right-border">
					<view class="font-normal">深睡</view>
					<view class="font-normal">
						<view class="cu-avatar sm round margin-right-xs bgpoint" style="background-color:#427EE3"></view>{{getTime(deepTime)}}
					</view>
				</view>
				<view class="flex-sub">
					<view class="font-normal">浅睡</view>
					<view class="font-normal"><view class="cu-avatar sm round margin-right-xs bgpoint" style="background-color:#afc9f5"></view>{{getTime(lightTime)}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {formDateDay,formatHour,getLaterMinuteTime,formatDate} from "@/utils/datetime.js"
	var that
	export default {
		props: {
			title: {
				type: String,
				default: ''
			},
			date:{
				type:String,
				default:''
			}
		},
		data() {
			return {
				deepTime:'',
				lightTime:'',
				timePeriod:[],
				isactive:'-1',
				startTime:'',
				endTime:"",
				time:'点击查看时间段'
			}
		},
		watch:{
			date(){
				this.isactive='-1'
				this.time = '点击查看时间段'
				var newDate =formatDate(Date.parse(new Date(that.date))-24*3600*1000).substring(0,10)
				this.getData(newDate)
			}
		},
		created:function(){
			that = this;
			this.getData(formatDate(Date.parse(new Date(that.date))-24*3600*1000).substring(0,10))
		},
		methods:{
			getData(date){
				this.$http.getBLSleep({
					 "startTime":date,
					 "endTime":date
				}).then(data=>{
					if(data.content.length>=1){
						var res = data.content
						that.startTime = res[0].sleepStartTime
						that.endTime = res[res.length-1].sleepEndTime
						var lightTime=0,deepTime=0,timePeriod=[]
						
						for(var i=0;i<res.length;i++){
							lightTime += res[i].lightSleepTotal
							deepTime += res[i].deepSleepTotal
							timePeriod=timePeriod.concat(res[i].sleepData)
						}
						that.lightTime = lightTime
						that.deepTime = deepTime
						that.timePeriod = timePeriod
					}else{
						that.startTime=''
						that.endTime=''
						that.lightTime = ''
						that.deepTime = ''
						that.timePeriod = ''
					}
				})
			},
			getTime(time){
				return formatHour(time);
			},
			getWidth(timeLength){
				return timeLength*100/60/(this.deepTime+this.lightTime)+'%'
			},
			showTime(index,start,len){
				this.isactive = index;
				this.time = formatDate(start)+"——"+formatDate(start+len*1000);
			},
			getLaterMinuteTime(date,time){
				return getLaterMinuteTime(date,time);
			}
		}
	}
</script>

<style>
	page {
		width: 750upx;
		overflow-x: hidden;
	}
	
	.qiun-columns {
		display: flex;
		flex-direction: column !important;
	}

	.qiun-bg-white {
		background: #FFFFFF;
	}

	.qiun-title-bar {
		/* width: 96%; */
		padding: 10upx 2%;
		flex-wrap: nowrap;
	}

	.qiun-title-dot-light {
		border-left: 10upx solid #0ea391;
		padding-left: 10upx;
		font-size: 32upx;
		color: #000000
	}
	/* 通用样式 */
	.qiun-charts {
		width: 750upx;
		height: 380upx;
		background-color: #FFFFFF;
	}
	
	.container {
		height: 10vh;
		width: 100%;
	}
	.deepsleep {
		width: 32rpx;
		height: 22rpx;
		border-radius: 5rpx;
		background-color: #427EE3;
	}
	.softsleep {
		width: 32rpx;
		height: 22rpx;
		border-radius: 5rpx;
		background-color: #afc9f5;
	}
	.deeptime {
		background-color: #427EE3;
		height: 100%;
	}
	.softtime {
		background-color: #afc9f5;
		height: 100%;
	}
	.timegroup {
		height: 3vh;
		position: relative;
	}
	.timelabel {
		position: absolute;
	}
	.right-border {
		border-right: 0.5px solid #ddd;
	}
	.bgpoint {
		width: 20rpx!important;
		height: 20rpx!important;
	}
	.bg{
		background-color:rgb(110,156,234)
	}
</style>
